<script  setup>
import { ref, watch, onMounted, toRef } from 'vue'
import xing from '@/assets/img/xing.jpg'
import router from '@/assets/img/router.jpg'
import cang from '@/assets/img/cang.jpg'
import jia from '@/assets/img/jia.jpg'
import di from '@/assets/img/di.jpg'
import BScroll from '@better-scroll/core'

const scroll = ref(null)
const emit = defineEmits(['switchcene'])
const props = defineProps({
  controlls: {
    type: Boolean
  }
})

watch(
  () => props.controlls,
  (newVal, oldVal) => {
    console.log(props.controlls)
    console.log(`watch监听变化前的数据：${oldVal}`)
    console.log(`watch监听变化后的数据：${newVal}`)
  },
  {
    immediate: true, // 立即执行
    deep: true // 深度监听
  }
)
//点击切换场景
const hitme = (img) => {
  if (props.controlls) {
    emit('switchcene', img)
  }
}

//初始化滚动
const init = () => {
  let bs = new BScroll(scroll.value, {
    scrollX: true,
    probeType: 3, // listening scroll event
  })
  bs.on('scrollStart', () => { })
  bs.on('scroll', ({ y }) => { })
  bs.on('scrollEnd', () => { })
}
//图片列表
const emojis = [xing, 'http://aztl.tuodayun.net/aztl/profile/avatar/2022/04/12/0e925b82-2ffa-4ebf-97ab-f45849878b49.jpeg', cang, jia, di]

onMounted(() => {
  init()
  console.log(scroll.value)
})
</script>

<template>
  <div class="horizontal-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div class="scroll-item" v-for="(item, index) in emojis" :key="index">
          <img :src="item" @click="hitme(item)" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
a {
  color: #42b983;
}

.horizontal-container {
  width: 50vw;

  .scroll-wrapper {
    position: relative;
    width: 90%;
    margin: 80px auto;
    white-space: nowrap;
    border: 3px solid #42b983;
    border-radius: 5px;
    overflow: hidden;
  }

  .scroll-content {
    display: inline-block;

    .scroll-item {
      background: #fff;
      height: 150px;
      width: 200px;
      line-height: 50px;
      font-size: 24px;
      display: inline-block;
      text-align: center;

      &:not(:first-child) {
        margin-left: 10px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      cursor: pointer;
    }
  }
}
</style>
